import React, { Component } from 'react'
import './index.css';
export default class Footer extends Component {
    render() {
        //获取总的任务数量
        let total = this.props.todos.length;
        let compTotal = this.props.todos.filter(item => item.done).length;
        //判断
        let isAllDone = this.props.todos.length >0  &&  this.props.todos.every(item => item.done);
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" onChange={this.change} checked={isAllDone} />
                </label>
                <span>
                    <span>已完成 {compTotal}</span> / 全部 {total}
                </span>
                <button className="btn btn-danger" onClick={this.props.removeAllCompTodo}>清除已完成任务</button>
            </div>
        )
    }

    //
    change = e => {
        //设置所有的任务状态
        this.props.checkAllTodo(e.target.checked)
    }

    removeAll = () => {
        this.props.removeAllCompTodo();
    }
}
